<template>
	<view>
		<u-navbar :title="titleText" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="main">
			<view class="showArea">
				<!-- 动态 -->

				<!-- 我的书架 -->
				<view class="item active">

				</view>
			</view>
			<!-- 展示动态 -->

			<!-- 展示书架 -->
			<scroll-view v-if="getclassifytwo.length>0" :style="'height:' + bottomBoxHeight + 'px'" scroll-y="true" class="bookshelf">
				<bookShelf :bookShelf="getclassifytwo" />
			</scroll-view>
			<u-empty v-else mode="list" marginTop="50%">
			</u-empty>
		</view>
	</view>
</template>

<script>
import {
	mapGetters
} from "vuex"
import bookShelf from '../mine/optionArea/bookShelf.vue'
export default {
	components: {
		bookShelf,
	},
	onLoad() {
		this.titleText = this.$Route.query.childName
	},
	data() {
		return {
			titleText: '',

		}
	},
	computed: {
		...mapGetters(['getclassifytwo']),
		bottomBoxHeight() {
			return this.$tools.getScreenHeight() - 100
		}
	},
	methods: {
	}
}
</script>

<style lang="scss" scoped>
.main {
	.showArea {
		// position:relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		height: 100%;
		border-bottom: 1px solid #e5e5e5;

		.item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
			height: 100%;
			padding: 0.5rem;
			color: rgb(99, 114, 116);

		}

		.active {
			color: black;
			font-size: 1.2rem;
		}


	}

	.top {
		background: $uni-color-theme-1;
		position: relative;
		//left: 50%;
		top: 0;
		//transform: translate(-50%, -30%);
		width: 100%;
		height: 18rem;
		box-shadow: 0px 10px 15px -10px #ccc;

		.userInfo {
			padding-top: 5rem;
			display: flex;
			flex-direction: column;
			margin-left: 1rem;

			.headicon {
				display: flex;
				align-items: center;
				margin-left: 0rem;

				.btnBox {

					width: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					margin-right: 1rem;

					.direct {
						margin-right: 1rem;
						display: flex;
						width: 4rem;
					}

				}
			}

			.focus {
				margin-top: 0.5rem;
				margin-left: 0.7rem;
				display: flex;
				justify-content: space-between;
				width: 40%;
				color: rgb(99, 114, 116);
			}

			// .headicon{
			// 	display: flex;
			// 	// justify-content: flex-start;
			// 	align-items: center;
			// 	.direct{					
			// 		font-size: 1.5rem;				
			// 		width:4rem;
			// 		height:2rem;
			// 		border-radius: 0.3rem;
			// 		padding:0 1rem;
			// 	}
			// 	.bigBtn{
			// 		background-color: red;

			// 		// justify-content: flex-end;

			// 	.btn{
			// 		border-radius: 1rem;
			// 		font-size: 1rem;
			// 		border-radius: 0.3rem;
			// 	}
			// 	}
			// 	}
			.titleName {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				margin-left: 0.8rem;

				.icon {
					margin-top: 0.7rem;
					margin-left: 0.5rem;
				}

				.name {
					margin-top: 0.5rem;
					font-size: 1.5rem;
					color: rgb(99, 114, 116);
					;
				}
			}
		}
	}
}
</style>
